<template lang="html">
  <div class="container content content-authority" v-loading="loading">

    <el-row :gutter="20" class="organization-list">
      <el-col :span="6" v-for="dept in serials" :key="dept.groupCode" class="organization-list-item" @click.native="gotoColumns(dept)">
        <el-card shadow="always" >
          {{dept.groupName}}
        </el-card>
      </el-col>
    </el-row>
    <div class="no-list" v-if=" showMsg">
        您还没有分管的会议组，请联系管理员
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { mapGetters, mapMutations } from "vuex";
import axios from "axios";
import storage from "@/assets/js/storage";
export default {
  name: "choosesorg",
  data() {
    return {
      serials: [],
      loading: false,
      hasLoading: false
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "getUserInfo"
    }),
    showMsg: function() {
      if (this.hasLoading) {
        if (!this.serials || this.serials.length === 0) {
          return true;
        }
      }
      return false;
    }
  },
  methods: {
    searchGroup() {
      this.loading = true;
      let path = "/station/api/meeting/group/searchGroup";
        let headers = { token: this.userInfo.token };
      axios
        .get(path, {
          params: {},
          headers: headers,
        })
        .then(data => {
          if (data.data.status === "SUCCESS") {
            this.hasLoading = true;
            this.serials = data.data.content;
          } else {
            this.$message.error(
              data.data.errorMsg ? data.data.errorMsg : "获取分管会议组失败，请联系管理员"
            );
          }
          this.loading = false;
        })
        .catch(err => {
          // eslint-disable-next-line no-console
          console.log(err);
          this.$message.error("获取分管会议组失败");
          this.loading = false;
        });
    },
    gotoColumns(dept) {
      let param = { id: dept.id, groupName:dept.groupName};
      this.$router.push({
        path: "columnList",
        query: param
      });
    }
  },
  mounted() {
    storage.initUserInfo();
    this.searchGroup();
  }
};
</script>

<style lang="scss" scoped>
.content-authority {
  padding: 90px 30px 30px 30px !important;
  .organization-list {
    padding: 30px;
    &-item {
      & .el-card {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .no-list {
    text-align: center;
  }
}
</style>
